<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>receMess</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var socket;
        $(document).ready(function () {
            socket = io.connect('ws://' + document.domain + ':' + location.port + '/receMess');
            socket.on('connect', function () {
                console.log('connect');
            });
            socket.on('message', function (data) {
                $('#id_chat_area').val($('#id_chat_area').val() + data.msg + '\n');
            });
            $('#id_chat_button').on('click', function (e) {
                console.log('click button');
                var juraner = {
                        'name': 'juran',
                        'height': 180
                }
                socket.emit('my_text', juraner);
            })
        })


    </script>
</head>
<body>
<h1>ReceMess</h1>
<textarea id="id_chat_area" cols="80" rows="20"></textarea><br><br>
<button id="id_chat_button" type="submit">按钮</button>
</body>
</html>